<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>FireWorkTest</title>
    
    <link rel="stylesheet" href="./css/demo1.css"/>
    <link rel="stylesheet" href="./css/common1.css"/>
</head>
<body>
<div class="cut-show" id="sectionContent">
    <canvas id="2dCanvas"></canvas>
</div>
<div>
    <img style="width:200px;position: absolute;right:0;top: 0;" src="links/link.png"/>
</div>
<div id="menu">
    <table style="display: none">
        <tr>
            <td><input id="FireWorkVersion1" type="button" value="红"/></td>
            <td><input id="FireWorkVersion2" type="button" value="黄"/></td>
            <td><input id="FireWorkVersion3" type="button" value="蓝"/></td>
        </tr>
        <tr>
            <td><input id="FireWorkVersion4" type="button" value="绿"/></td>
            <td><input id="FireWorkVersion5" type="button" value="粉"/></td>
            <td><input id="FireWorkVersion6" type="button" value="紫"/></td>
        </tr>
        <tr>
            <td><input id="FireWorkVersion7" type="button" value="心"/></td>
            <td><input id="FireWorkVersion8" type="button" value="球"/></td>
            <td><input id="FireWorkVersion9" type="button" value="转"/></td>
        </tr>
        <tr>
            <td colspan="3"> <input id="FullScreen" type="button" value="全屏显示"/></td>
        </tr>
    </table>
    <table id="offsetControl">
        <!--<tr>-->
            <!--<td colspan="2"><p id="offsetHint">X偏移：0，Y偏移：0</p></td>-->
        <!--</tr>-->
        <tr>
            <td ><input id="offsetX"  type="text" placeholder="X偏移"/></td>
            <td ><input id="offsetY"  type="text" placeholder="Y偏移"/></td>
        </tr>
    </table>
</div>
<canvas id="renderCanvas"></canvas>
<script src="./js/babylon.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-fullScreen.min.js"></script>
<script src="js/LightingEnd.js"></script>
<script>
    var isConnected = false;
    /**
     * 定义WebSocket连接属性
     */
    var wsUri = "ws://3dfirework.inter-lighting.com:8089/api/select";
//        var screenLength = 100;
//        var screenHeight = 100;
//        var screenWidth = 100;
        var screenLength = 20;
        var screenHeight = 20;
        var screenWidth = 10;
        var minValue = 0;
        if(screenHeight <= screenLength){
            minValue =screenHeight;
        }else{
            minValue =screenLength;
        }
        if(minValue >screenWidth){
            minValue = screenWidth;
        }
    window.addEventListener('DOMContentLoaded', function () {
        init();
        function init () {
            $("#menu").css("left",( $(window).width()/2-50)+"px");
            $("#offsetX").bind('input propertychange',function(){
                $("#sectionContent").css("left",($("#offsetX").val()-1)+"px");
                $("#offsetHint").text($("#offsetX").val()+"px");
            });
            $("#offsetY").bind('input propertychange',function(){
                $("#sectionContent").css("top",($("#offsetY").val()-1)+"px");
            });
        }
        /*
         判断是否是有效的URL
         */
        if (wsUri == "" || wsUri == null) {
            console.log("WebSocket URL not defined")
            return;
        } else {
            connection(sceneCreateFunc);
        }
        /*
         连接方法，连接成功后回调创建场景方法
         */
        function connection(sceneCreateFunc) {
            if (!isConnected) {
                Lighting.initWebSocketConnection(wsUri);
                isConnected = !isConnected;
                sceneCreateFunc();
            }
        }
        function sceneCreateFunc() {
            Lighting.create({
                modelType: "effect",
                dragElementId: "menu",
                renderCanvasId: "renderCanvas",
                isShowAxis: false
            });
        }
        $(window).resize(function() {
            $("#menu").css("left",( $(window).width()/2-50)+"px")
        });
    });
</script>
</body>
</html>